<template>
    <div class="block" v-loading.lock="$store.state.fullscreenLoading">
        <mt-swipe :auto="4000" class="swipe">
            <mt-swipe-item v-for="(item,index) of bannerList" :key="index">
                <img :src="item.imageUrl" alt="" @click="clickBanner(item)">
            </mt-swipe-item>
        </mt-swipe>
        <div class="hotSongs">
            <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                        热门歌单推荐
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                              v-for="(item,index) of hotMenu"
                              :key="index"
                              @click.native="changeHotSeries(item.name)"
                      >
                         {{item.name}}
                      </el-dropdown-item>
                  </el-dropdown-menu>
            </el-dropdown>
            <div class="hotSongsList" v-infinite-scroll="lazyLoad">
                <div class="listItem"
                     v-for="(item,index) of hotMenuContent"
                     :key="index"
                     @click="skipToDetail(item.id)"
                >
                    <div class="listItemImg">
                        <img :src="item.coverImgUrl" alt="">
                    </div>
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
  import { getBanner, getHighQualitySongsMenu,getHighQualitySongsMenuContent } from "../api/http.js";
  import { mapMutations } from "vuex"
  export default {
    name: "recommend",
    component: {},
    data() {
      return {
        bannerList: [],
        hotMenu:[],
        hotMenuContent:[],
        currentSeries:'',
        limit:9,
        page:0
      };
    },
    created() {
        this.getBannerList();
        this._getHighQualitySongsMenu();
        this._getHighQualitySongsMenuContent(this.limit,0,"全部")
    },
    methods: {
      ...mapMutations(["setLoading"]),
      async getBannerList() {
        const res = await getBanner();
        this.bannerList = res.data.banners;
        console.log(this.bannerList)
      },
      async _getHighQualitySongsMenu() {
        const res = await getHighQualitySongsMenu();
        this.hotMenu = res.data.tags
      },
      async _getHighQualitySongsMenuContent(limit,offset,series){
        this.setLoading(true)
        const res = await getHighQualitySongsMenuContent(limit,offset,series)
        this.hotMenuContent = [...this.hotMenuContent,...res.data.playlists]
        this.setLoading(false)
      },
      lazyLoad(){
        this.page ++
        const offset = (this.page - 1) * this.limit
        this._getHighQualitySongsMenuContent(this.limit,offset,this.currentSeries)
      },
      clickBanner(e) {
        switch (e.targetType) {
          case 1 : //单曲
            console.log("单曲",e.targetType);
            break;
          case 10 : //专辑
            console.log("专辑",e.targetType)
            break;
          case 1000 : //歌单
            this.skipToDetail(e.targetId)
            console.log("歌单",e.targetType);
            break;
          case 1004 : //MV
            console.log("MV",e.targetType);
            break;
          case 3000 : //外链
            console.log("外链",e.targetType);
            location.href = e.url;
            break;
        }
      },
      changeHotSeries(e){
        this.currentSeries = e
        this.hotMenuContent = []
        this.page = 1
        this._getHighQualitySongsMenuContent(this.limit,0,e)
      },
      skipToDetail(id){
        console.log(id)
        this.$router.push({
          name:"recommend_detail",
          params:{
            playlist_id:id
          }
        })
      }
    }
  };
</script>

<style scoped lang="scss">
    @import "../common/variable";
    .swipe {
        width: 100%;
        height: 150rem;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .hotSongs {
        margin-top: 10rem;
        span {
            font-size: $header-fontsize-M;
            font-weight: bold;
        }
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #444EFF;
    }
    .el-icon-arrow-down {
        font-size: $header-fontsize-S;
    }
    .hotSongsList{
        max-height: 380rem;
        display: flex;
        flex-wrap:wrap;
        overflow: auto;
        .listItem{
            width: 31.1%;
            height:41%;
            margin-right: 8rem;
            margin-top: 8rem;
            color: $font-color;
            font-size: $header-fontsize-S;
            .listItemImg{
                width: 100%;
                height: 110rem;
                border-radius: 6rem;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            p{
                margin: 0;
                text-overflow: ellipsis;
                height: 35rem;
                white-space: normal;
                overflow: hidden;
            }
        }
    }
</style>